import React, { Component } from 'react';

class App extends Component {

  state = {
    count: 100
  }

  render() {
    return (
      <div>

        <h1>{this.state.count}</h1>

        <button onClick={function(){
          console.log('普通函数被点击了', this)
          // 在 react 的事件中直接添加的普通函数会导致 this 是一个 undefined
          // 所以这里不能正常使用 this 来进行修改值
          // this.setState()
        }}>点击增加</button>


        <button onClick={()=>{
          // 可以将事件后的函数写成一个箭头函数，因为箭头函数指向的是外部 this 所以可以正常使用
          console.log('箭头函数被点击了', this)

          // 在 react 在 微信小程序 中都是这样的写法
          // 只有 vue 和其他不一样
          this.setState({
            count: this.state.count + 1
          })

        }}>点击增加</button>

      </div>
    );
  }
}

export default App;
